<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>后台登录</title>
		<meta name="author" content="DeathGhost" />
		<link rel="stylesheet" type="text/css" href="./layui/css/style.css" tppabs="css/style.css" />
		<script src="./js/global.js"></script>
		<link rel="stylesheet" href="./css/login.css">
		<script src="./js/jquery.min.js"></script>
		<link href="./layui/css/layui.css" />
	</head>
	<body class="login-bg">
		<canvas id="fullstarbg">你的浏览器不支持canvas标签</canvas>
		<div class="login">
			<div class="message">招生系统登录</div>
			<div id="darkbannerwrap"></div>
			<form method="post" id="fmLogin" onsubmit="return false" class="layui-form">
				<input id="loginName" name="loginName" placeholder="用户名" type="text" lay-verify="required"
					class="layui-input input">
				<hr class="hr15">
				<input id="password" name="password" lay-verify="" placeholder="密码" type="password"
					class="layui-input input">
				<hr class="hr15">
				<input value="立即登录" class="phone" lay-submit lay-filter="login" style="width:100%;" type="submit">
				<hr class="hr20">
				<button class="layui-btn set" style="width: 48%;" data-type="reload" lay-filter="set"
				 value="phone"><i class="layui-icon">&#xe678;</i>
					手机登录</button>
				<button class="layui-btn set" style="width: 48%;" data-type="reload" lay-filter="set"
				value="email"><i class="layui-icon">&#xe67b;</i>
					其他方式</button>
			</form>

			<!-- 手机验证码 -->
			<form id="phone" onsubmit="return false" class="layui-form" style="display: none">
				<input id="protectMTel" name="protectMTel" placeholder="手机号" type="text" lay-verify="required"
					class="layui-input input">
				<hr class="hr15">
				<div class="layui-inline layui-show-xs-block" style="width: 60%;">
					<input id="PhonePassword" name="PhonePassword" lay-verify="" placeholder="验证码" type="text"
						class="layui-input input">
				</div>
				<div class="layui-inline layui-show-xs-block" style="width: 38%;">
					<input type="button" id="second" value="获取验证码" />
				</div>
				<hr class="hr15">
				<input value="登录" class="phone" lay-submit lay-filter="login" style="width:100%;" type="submit">
				<hr class="hr20">
				<button class="layui-btn set" style="width: 48%;" data-type="reload" lay-filter="set"
					value="password"><i class="layui-icon">&#xe678;</i>
					密码登陆</button>
				<button class="layui-btn set" style="width: 48%;" data-type="reload" lay-filter="set" 
				value="email"><i class="layui-icon">&#xe67b;</i>
					其他方式</button>
			</form>
		</div>
		<script>
			$(".set").on('click', function(obj) {
				if (this.value == 'password') {
					$("#fmLogin").show();
					$("#phone").hide();
				} else if (this.value == 'phone') {
					$("#fmLogin").hide();
					$("#phone").show();
				}
				$(".input").val("");
			});

			layui.use(['form'], function() {
				$ = layui.jquery;
				var form = layui.form,
					layer = layui.layer;
		        
				//监听提交
				form.on('submit(login)', function(data) {
					//通过Ajax调用登录接口
					$.ajax({
						type: 'post', //提交方式get或post
						url: globalData.server + 'login', //提交路径 globalData.server+'login'
						data: {
							"loginName": $("#loginName").val(),
							"password": $("#password").val(),
							"code": $("#PhonePassword").val(),
							"phoneNumber": $("#protectMTel").val()
						},
						dataType: 'json',
						success: function(res) {
							localStorage.token = res.token;
							var user = res.data;
							var myArray = new Array();
							if (user != null) {
								localStorage.user = user;
								globalData.setUserInfo(user.id, user.loginName, user.roles, user
									.rolesIds);
								window.location.href = 'main.html';
							} else {
								layer.alert('登录失败' + res.message, {
									icon: 1,
									time: 2000
								}); //提示信息						
							}
						},
						error: function() {
							alert("系统异常！！！");
						}
					});
					return false;
				})
			});


			$(function() {
				$("#second").click(function() {
					sendCode($("#second"));
				});
				v = getCookieValue("secondsremained"); //获取cookie值
				if (v > 0) {
					settime($("#second")); //开始倒计时
				}
			})
			//发送验证码
			function sendCode(obj) {
				var phonenum = $("#protectMTel").val();
				var result = isPhoneNum();
				if (result) {
					//ajax调用后台
					$.ajax({
						type: 'post', //提交方式get或post
						url: "" + globalData.server + 'sendMobileCode', //提交路径 globalData.server+'login'
						data: {
							phoneNumber: phonenum
						},
						dataType: 'json',
						success: function(res) {
							if (res.code == 'error') {
								alert("发送失败，请重试！");
							} else {
								alert("发送成功，请查看手机！");
								alert("验证码为：" + res.code);
							}
						},
						error: function() {
							alert("系统异常！！！");
						}
					});
					addCookie("secondsremained", 60, 60); //添加cookie记录,有效时间60s
					settime(obj); //开始倒计时
				}
			}

			//开始倒计时
			var countdown;

			function settime(obj) {
				countdown = getCookieValue("secondsremained");
				if (countdown == 0) {
					obj.removeAttr("disabled");
					obj.val("免费获取验证码");
					return;
				} else {
					obj.attr("disabled", true);
					obj.val("重新发送(" + countdown + ")");
					countdown--;
					editCookie("secondsremained", countdown, countdown + 1);
				}
				setTimeout(function() {
					settime(obj)
				}, 1000) //每1000毫秒执行一次
			}
			//校验手机号是否合法
			function isPhoneNum() {
				var phonenum = $("#protectMTel").val();
				var myreg = /^1(3|4|5|6|7|8|9)\d{9}$/;//   /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/
				if (!myreg.test(phonenum)) {
					alert('请输入有效的手机号码！');
					return false;
				} else {
					return true;
				}
			}



			//发送验证码时添加cookie
			function addCookie(name, value, expiresHours) {
				var cookieString = name + "=" + escape(value);
				//判断是否设置过期时间,0代表关闭浏览器时失效
				if (expiresHours > 0) {
					var date = new Date();
					date.setTime(date.getTime() + expiresHours * 1000);
					cookieString = cookieString + ";expires=" + date.toUTCString();
				}
				document.cookie = cookieString;
			}
			//修改cookie的值
			function editCookie(name, value, expiresHours) {
				var cookieString = name + "=" + escape(value);
				if (expiresHours > 0) {
					var date = new Date();
					date.setTime(date.getTime() + expiresHours * 1000); //单位是毫秒
					cookieString = cookieString + ";expires=" + date.toGMTString();
				}
				document.cookie = cookieString;
			}
			//根据名字获取cookie的值
			function getCookieValue(name) {
				var strCookie = document.cookie;
				var arrCookie = strCookie.split("; ");
				for (var i = 0; i < arrCookie.length; i++) {
					var arr = arrCookie[i].split("=");
					if (arr[0] == name) {
						return unescape(arr[1]);
						break;
					} else {
						return "";
						break;
					}
				}

			}
		</script>
	</body>
</html>
